<template>
    <div class="stork-progress">
		<div class="total-area"/>
		<div class="data-area" :style="'width:'+dataLen+'%'"/>
		<div class="text">{{myText}}</div>
	</div>
</template>
<style lang="scss" scoped>
.stork-progress{
	--theme-color:v-bind(themeColor);
	overflow: hidden;border-radius:10px;
	position:relative;height:16px; display:inline-block; width:100%;
	.total-area{height:100%;width:100%; border-radius:10px; background: var(--theme-color); opacity: .3}
	.data-area{position:absolute;top:0;left:0;height:100%; border-radius:10px; background: var(--theme-color); opacity: .6}
	.text{
		position:absolute;top:0;left:0; line-height:16px; font-size:12px; color:var(--white-color);
		text-indent:16px;
	}
}
</style>
<script lang="ts" setup>
const props=defineProps({
	themeColor:{
		type:String,
		required:false,
		default:import.meta.env.VITE_THEME_COLOR
	},
	totalNum:{
		type:Number,
		required:true,
	},
	dataNum:{
		type:Number,
		required:true,
		default:0
	},
	formatData:{
		type:String,
		required:false,
		default:'{#data}'
	},
	formatPer:{
		type:String,
		required:false,
		default:'{#per}%'
	}
})
if(props.totalNum===0)	props.totalNum=1;
const dataLen = ref( props.dataNum*100/props.totalNum )
const myText =ref('');
let dataText = props.formatData.replace('\{\#data\}',props.dataNum)
let perText = props.formatPer.replace('\{\#per\}',dataLen)
myText.value = dataText+perText
</script>